<template>
  <div id="app">
    <div>{{ message }}</div>
    <div class="intro">
      <p style="color: yellow">
        你的待办事项有{{ highTasks }}项重要，{{ normalTasks }}项一般，{{
          lowTasks
        }}项低。
      </p>
      <img :src="imgUrl" alt="avatar" />
    </div>
    <hr />
    <input
      type="text"
      class="taskInput"
      v-model="newTask"
      placeholder="把计划写下来吗?"
      @keyup.enter="addTask"
    />
    <button @click="addTask">添加</button>
    <div class="priority">
      <div>
        <input type="radio" value="重要" v-model="priority" />重要
        <input type="radio" value="一般" v-model="priority" />一般
        <input type="radio" value="低" v-model="priority" />低
      </div>
      <p>任务优先级: {{ priority }}</p>
    </div>
    <div>任务列表</div>
    <template v-if="tasks.length > 0">
      <ul>
        <li v-for="(task, index) in tasks" :key="index">
          <div class="yuan" :style="getStyleByTask(task)"></div>
          <div class="task-text" v-if="!task.editing">{{ task.text }}</div>
          <input v-else type="text" v-model="task.text" />

          <div class="actions">
            <span class="edit" @click="toggleEdit(task)">
              {{ task.editing ? '保存' : '编辑' }}
            </span>
            <span class="delete" @click="deleteTask(index)">删除</span>
          </div>
        </li>
      </ul>
    </template>
    <template v-else>
      <p>没有数据！</p>
    </template>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const newTask = ref('')
const priority = ref('一般')
const tasks = ref([
  {
    text: '学习前端基础HTML5/CSS3/JavaScript',
    editing: false,
    priority: '一般',
  },
  { text: '学习Vue.JS的基础知识', editing: false, priority: '重要' },
  { text: '学习前端构建工具', editing: false, priority: '一般' },
  { text: '学习前端UI构建', editing: false, priority: '重要' },
  { text: '学习前端状态管理', editing: false, priority: '一般' },
  { text: '学习前端路由管理', editing: false, priority: '一般' },
  { text: '学习前端网络管理', editing: false, priority: '低' },
  { text: '综合案例实战', editing: false, priority: '一般' },
])
const message = '你的代办事项'
// const intro = "<p style='color:yellow'>待办事项是一款任务管理工具，用户可以用它方便地组织和安排事务，把要做的事情一项一项地列出来，避免忘记。它具有以下功能</p>";
const imgUrl = './images/user.png'

const getStyleByTask = task => {
  switch (task.priority) {
    case '重要':
      return { backgroundColor: 'red' }
    case '低':
      return { backgroundColor: 'gray' }
    default:
      return { backgroundColor: 'green' }
  }
}

// 计算属性
const highTasks = computed(() => {
  return tasks.value.filter(task => task.priority === '重要').length
})

const lowTasks = computed(() => {
  return tasks.value.filter(task => task.priority === '低').length
})

const normalTasks = computed(() => {
  return tasks.value.filter(task => task.priority === '一般').length
})
const addTask = () => {
  if (newTask.value.trim() !== '') {
    tasks.value.push({
      text: newTask.value,
      editing: false,
      priority: priority.value,
    })
    newTask.value = ''
    priority.value = '一般'
  }
}

const toggleEdit = task => {
  task.editing = !task.editing
}

const deleteTask = index => {
  if (confirm('确定要删除这个任务吗？')) {
    tasks.value.splice(index, 1)
  }
}
</script>

<style scoped></style>
